<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Home</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" th:href="@{/index/css/bootstrap.min.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/animate.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/animate-heading.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/reset.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/meanmenu.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/magnific-popup.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/owl.carousel.min.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/et-line-icon.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/ionicons.min.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/material-design-iconic-font.min.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/style.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/responsive.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/responsive.css}"/>
        <link rel="stylesheet" th:href="@{/index/css/index.css}"/>
        <script th:src="@{/index/js/vendor/modernizr-2.8.3.min.js}"></script>

    </head>
    <body>

        <!-- Header Area Start -->
		<header class="top">
			<div class="header-area header-sticky">
				<div class="container">
					<div class="row">
						<div class="col-md-1 col-md-offset-5">
							<div class="logo">
								<a id="logo"><img style="height: 40px;" th:src="@{/index/img/logo.png}"  alt="spase" /></a>
                            </div>
						</div>
                        <div class="col-md-2 col-sm-3 col-xs-3">
                            <div class="content-wrapper">
                                <!-- Main Menu Start -->
                                <div class="main-menu text-left">
                                    <nav>
                                        <ul>
                                            <li><a style="font-size: 25px;">薪火邮件</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
						</div>
                        <button class="banner-btn login" onclick="toAdmin()" data-text="开始使用"><span>开始使用</span></button>
					</div>
				</div>
			</div>
		</header>
		<!-- Header Area End -->
		<!-- Background Area Start -->
        <section id="slider-container" class="slider-area"> 
            <div class="slider-owl owl-theme owl-carousel">
                <!-- Start Slingle Slide -->
                <div class="single-slide item" style="background-image: url(https://s2.loli.net/2022/07/20/uYZvVfXz97cqD4a.jpg)">
                    <!-- Start Slider Content -->
                    <div class="slider-content-area">  
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12"> 
                                    <div class="slide-content-wrapper">
                                        <div class="slide-content">
                                            <h2>Bonfire Email</h2>
                                            <p>沟通多一点，效率高一点</p>
                                            <a class="banner-btn" href="#" data-text="learn more"><span>Learn more</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Start Slider Content -->
                </div>
                <!-- End Slingle Slide -->

                <!-- Start Slingle Slide -->
                <div class="single-slide item" style="background-image: url(https://s2.loli.net/2022/07/20/INcMfWsY64urPSp.jpg)">
                    <!-- Start Slider Content -->
                    <div class="slider-content-area">   
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12"> 
                                    <div class="slide-content-wrapper">
                                        <div class="slide-content">
                                            <h2>Bonfire Email</h2>
                                            <p>沟通多一点，效率高一点</p>
                                            <a class="banner-btn" href="#" data-text="learn more"><span>Learn more</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Start Slider Content -->
                </div>
                <!-- End Slingle Slide -->

                <!-- Start Slingle Slide -->
                <div class="single-slide item" style="background-image: url(https://s2.loli.net/2022/07/20/uYZvVfXz97cqD4a.jpg)">
                    <!-- Start Slider Content -->
                    <div class="slider-content-area">  
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12"> 
                                    <div class="slide-content-wrapper">
                                        <div class="slide-content">
                                            <h2>Bonfire Email</h2>
                                            <p>沟通多一点，效率高一点</p>
                                            <a class="banner-btn" href="#" data-text="learn more"><span>Learn more</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Start Slider Content -->
                </div>
                <!-- End Slingle Slide -->
            </div>
        </section>
		<!-- Background Area End -->
        <!-- Cowork Start -->
        <section class="cowork-area pt-120 pb-120">
           <div class="container">
               <div class="row">
                   <div class="col-md-6 col-sm-6 col-xs-12">
                       <div class="cowork-content section-title">
                            <h2>薪火邮件系统</h2>
                            <p>薪火邮件是一个智能反垃圾邮件识别系统，用于处理和拦截企业和个人的垃圾邮件，可以自动识别和分析邮件，具有对垃圾邮件归类和自动屏蔽等功能。基本的功能有人脸识别登录、垃圾邮件识别、收发邮件和邮件管理等，同时对邮件内容进行过滤，当识别到垃圾邮件时向用户发送垃圾邮件预警。
                            </p>
                       </div>
                   </div>
                   <div class="col-md-6 col-sm-6 col-xs-12">
                       <div class="cowork-img">
                           <div class="row">
                                <div class="col-sm-6">
                                   <a href="#"><img th:src="@{/index/img/co-worker/coworker1.jpg}" alt="cowork"></a>
                                </div>
                                <div class="col-sm-6">
                                    <a href="#"><img th:src="@{/index/img/co-worker/coworker2.jpg}" alt="cowork"></a>
                                </div>
                                <div class="col-sm-12">
                                    <a href="#"><img th:src="@{/index/img/co-worker/coworker3.jpg}" alt="cowork"></a>
                                </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </section>
        <!-- Cowork End -->
        <!-- Benefit Start -->
        <section class="benefit-area pb-115 pt-108">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-4 col-md-9 col-md-offset-3 col-sm-9 col-sm-offset-3 col-xs-12 benefit-col">
                        <div class="section-title text-left">
                            <h2>优势</h2>
                        </div>  
                    </div>
                </div>
                <div class="row"> 
                    <div class="col-lg-8 col-lg-offset-4 col-md-9 col-md-offset-3 col-sm-9 col-sm-offset-3 col-xs-12 benefit-col">
                        <div class="row">
                            <div class="col-md-4 col-sm-6 col-xs-12">     
                                <div class="single-benefit mb-40">
                                    <div class="benefit-icon">
                                        <a href="#"><span class="icon-key"></span></a>
                                    </div>    
                                    <div class="benefit-content">
                                        <h3><a>人脸识别登录</a></h3>
                                    </div>
                                </div>     
                                <div class="single-benefit hidden-xs">
                                    <div class="benefit-icon">
                                        <a href="#"><span class="icon-flag"></span></a>
                                    </div>    
                                    <div class="benefit-content">
                                        <h3><a>垃圾邮件识别</a></h3>
                                    </div>
                                </div>    
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">     
                                <div class="single-benefit mb-40">
                                    <div class="benefit-icon">
                                        <a href="#"><span class="icon-edit"></span></a>
                                    </div>    
                                    <div class="benefit-content">
                                        <h3><a>收发邮件</a></h3>
                                        <!-- <p>Lorem ipsum dolor sit amet, consecte adipisicing elit, sed do eiusmod tempor in ut labore et dolore magna. </p> -->
                                    </div>
                                </div>     
                                <div class="single-benefit hidden-xs">
                                    <div class="benefit-icon">
                                        <a href="#"><span class="icon-lock"></span></a>
                                    </div>    
                                    <div class="benefit-content">
                                        <h3><a>垃圾邮件拦截</a></h3>
                                        <!-- <p>Lorem ipsum dolor sit amet, consecte adipisicing elit, sed do eiusmod tempor in ut labore et dolore magna. </p> -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 hidden-sm col-xs-12">     
                                <div class="single-benefit mb-40">
                                    <div class="benefit-icon">
                                        <a href="#"><span class="icon-basket"></span></a>
                                    </div>    
                                    <div class="benefit-content">
                                        <h3><a>垃圾邮件预警</a></h3>
                                        <!-- <p>Lorem ipsum dolor sit amet, consecte adipisicing elit, sed do eiusmod tempor in ut labore et dolore magna. </p> -->
                                    </div>
                                </div>     
                                <div class="single-benefit hidden-xs">
                                    <div class="benefit-icon">
                                        <a href="#"><span class="icon-dial"></span></a>
                                    </div>    
                                    <div class="benefit-content">
                                        <h3><a>浏览器插件</a></h3>
                                        <!-- <p>Lorem ipsum dolor sit amet, consecte adipisicing elit, sed do eiusmod tempor in ut labore et dolore magna. </p> -->
                                    </div>
                                </div>
                            </div>     
                        </div>
                    </div>    
                </div>
            </div>
        </section>
        <!-- Class Area End -->

        <!-- Event Area Start -->
        <div class="event-area text-center pt-108 pb-115">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="event-content">
                            <h3>Are you ready to join us?</h3>
                            <a class="banner-btn" href="#" data-text="join"><span>join</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Event Area End -->

        <!-- Article Start -->
        <div class="article-area pt-108 pb-120">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="ccle section-title text-center">
                            <h2>latest work</h2>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="single-article">
                            <div class="article-img">
                                <a><img th:src="@{/index/img/article/article1.jpg}" alt="article"></a>
                                <div class="article-content">
                                    <div class="article-left">
                                        <h3><a href="#">15<br> July</a></h3>
                                    </div>
                                    <div class="article-right">
                                        <p><a href="#">收发邮件</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="single-article">
                            <div class="article-img">
                                <a><img th:src="@{/index/img/article/article2.jpg}" alt="article"></a>
                                <div class="article-content">
                                    <div class="article-left">
                                        <h3><a href="#">18<br> July</a></h3>
                                    </div>
                                    <div class="article-right">
                                        <p><a href="#">人脸识别登录</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 hidden-sm col-xs-12">
                        <div class="single-article">
                            <div class="article-img">
                                <a><img th:src="@{/index/img/article/article3.jpg}" alt="article"></a>
                                <div class="article-content">
                                    <div class="article-left">
                                        <h3><a href="#">19<br> July</a></h3>
                                    </div>
                                    <div class="article-right">
                                        <p><a href="#">垃圾邮件识别</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Article End -->
        <!-- Footer Start -->
        <footer class="footer-area">
            <div class="container">
                <div class="main-footer">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="single-widget mr-50">
                                <h3>about us</h3>
                                <p>薪火邮件</p>
                                <ul>
                                    <li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
                                    <li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
                                    <li><a href="#"><i class="zmdi zmdi-vimeo"></i></a></li>
                                    <li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-3 col-xs-12">
                            <div class="single-widget ml-100">
                                <h3>contact us</h3>
                                <p>2022数媒第七组<br>
                                Email: ctgu_email@163.com<br>
                                Phone: 123456789</p>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-5 col-xs-12">
                            <div class="single-widget ml-85">
                                <h3>latest work</h3>
                                <div class="footer-img">
                                    <a class="mr-2 mb-2"><img th:src="@{/index/img/footer/footer1.jpg}" alt="latest-work"></a>
                                    <a class="mr-2 mb-2"><img th:src="@{/index/img/footer/footer2.jpg}" alt="latest-work"></a>
                                    <a class="mb-2"><img th:src="@{/index/img/footer/footer3.jpg}" alt="latest-work"></a>
                                    <a class="mr-2"><img th:src="@{/index/img/footer/footer4.jpg}" alt="latest-work"></a>
                                    <a class="mr-2"><img th:src="@{/index/img/footer/footer5.jpg}" alt="latest-work"></a>
                                    <a ><img th:src="@{/index/img/footer/footer6.jpg}" alt="latest-work"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>   
                <div class="footer-bottom text-center">
                    <div class="row">
                        <div class="col-xs-12">
                            <p>Copyright &copy; 2022.BonfireMail All rights reserved.</p>
                        </div> 
                    </div>
                </div>
            </div>
        </footer>
        <!-- Footer End -->

        <script th:src="@{/index/js/vendor/jquery-1.12.0.min.js}"></script>
        <script th:src="@{/index/js/bootstrap.min.js}"></script>
        <script th:src="@{/index/js/jquery.meanmenu.js}"></script>
        <script th:src="@{/index/js/jquery.magnific-popup.min.js}"></script>
        <script th:src="@{/index/js/isotope.pkgd.min.js}"></script>
        <script th:src="@{/index/js/imagesloaded.pkgd.min.js}"></script>
        <script th:src="@{/index/js/jquery.counterup.min.js}"></script>
        <script th:src="@{/index/js/waypoints.min.js}"></script>
        <script th:src="@{/index/js/owl.carousel.min.js}"></script>
        <script th:src="@{/index/js/animate-heading.js}"></script>
        <script th:src="@{/index/js/jquery.mb.YTPlayer.js}"></script>
        <script th:src="@{/index/js/plugins.js}"></script>
        <script th:src="@{/index/js/main.js}"></script>
        <script>
            function toAdmin(){
                $(location).attr('href', '/admin')
            }
        </script>
    </body>
</html>
